<template>
  <Container>
    <template v-slot:searchForm>
      <div class="searchRow">
        <el-form class="elForm" ref="form" :model="searchFormData" label-width="80px">
          <!-- <el-form-item label="功能名称">
            <el-input v-model="searchFormData.funcName" clearable placeholder="请输入"></el-input>
          </el-form-item> -->
          <!-- <el-form-item label="数据类型">
            <el-input v-model="searchFormData.dataType" clearable placeholder="请输入"></el-input>
          </el-form-item> -->
        </el-form>
        <div class="btnList">
          <!-- <el-button type="danger" icon="el-icon-delete" @click="handleClickDel(selectionList)"
            :disabled="selectionList.length == 0" plain>删
            除</el-button> -->
          <el-button type="primary" icon="el-icon-circle-plus-outline" @click="handleClickAddEdit('add')"
            plain>添加</el-button>
          <el-button type="primary" icon="el-icon-search" @click="queryTableList" plain>查询</el-button>
        </div>
      </div>
    </template>
    <template v-slot:table>
      <el-tree :data="roledata" node-key="id" default-expand-all :expand-on-click-node="false" :props="{ children: 'child' }">
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ data.funcName }}</span>
          <span>
            <el-button type="text" size="mini" @click="() => handleClickAddEdit('add', data)">
              添加
            </el-button>
            <el-button type="text" size="mini" @click="() => handleClickAddEdit('edit', data)">
              编辑
            </el-button>
            <el-button type="text" size="mini" @click="() => handleClickDel(data.functionPermissionId)">
              删除
            </el-button>
          </span>
        </span>
      </el-tree>
      <AddEdit :title="'工单'+childrenfuncName?childrenfuncName:''" @closeDialog="closeDialog" :addEditFlag="addEditFlag" :dialogVisible="dialogVisible"
        :userList="userList" :data="formData">
      </AddEdit>
    </template>
  </Container>
</template>

<script>
import Container from "@/components/Container"
import AddEdit from './components/addEdit';
import functionPermissionApi from "@/api/functionPermission"
export default {
  components: { Container, AddEdit },
  data() {
    return {
      searchFormData: {},
      tableData: [],
      userList: [],
      selectionList: [],
      page: 1,
      size: 100,
      total: 10,
      addEditFlag: 'add',
      dialogVisible: false,
      formData: {},
      roledata: [],
      childrenfuncName:'',
      loading: false
    }
  },
  watch: {},
  mounted() {
    this.queryTableList();
  },
  methods: {
    queryTableList() {
      this.loading = true;
      functionPermissionApi.queryTree(this.searchFormData).then(res => {
        this.loading = false;
        let { data } = res
        this.roledata = data || []
        console.log(this.roledata)
      }).catch(err => {
        this.loading = false;
        console.log(err)
      })
    },
    closeDialog() {
      this.dialogVisible = false;
      this.formData = {};
      this.queryTableList();
    },
    handleClickDel(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        functionPermissionApi.del(id).then(res => {
          if (res.code == 1) {
            this.$message.success('删除成功')
          } else {
            this.$message.warning(res.msg || '删除失败')
          }
          this.queryTableList();
        }).catch(err => {
          this.$message.warning('删除失败')
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleClickAddEdit(flag = 'add', row = {}) {
      this.childrenfuncName = ''
      if (flag == 'add') {
        this.formData = JSON.parse(JSON.stringify(row));
        this.childrenfuncName = row.funcName?'-'+row.funcName+'子级':'顶级菜单';
        this.addEditFlag = flag
        this.dialogVisible = true;
      } else {
        this.formData = JSON.parse(JSON.stringify(row));
        this.addEditFlag = flag
        this.dialogVisible = true;
      }
    },
    handleSelectionChange(list = []) {
      this.selectionList = list
    },
    handleSizeChange(size) {
      this.size = size;
      this.queryTableList();
    },
    handleCurrentChange(page) {
      this.page = page;
      this.queryTableList();
    },
  }
}
</script>

<style lang="scss" scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
